<template>
    <div>
        <div class="wysiwyg-input">

        </div>
    </div>
</template>
<script>
import '../vendor/codemirror/codemirror.css'
import bootstarp from '../vendor/bootstarp/js/bootstrap.js'
import summernote from '../vendor/summernote/summernote.js'
import CodeMirror from '../vendor/codemirror/codemirror.js'

export default{
    name:'WYSIWYGinput',
    props:{
        value:{
            type:Object,
            default:function(){
                return {
                    chg:false,
                    val:''
                }
            }
        }
    },
    data(){
        return {
            is_init:false
        }
    },
    watch:{
        value:{
            deep:true,
            handler(v,ov){
                var self = this;
                if(v.chg==true){
                    $(self.$el).find('.wysiwyg-input').summernote('code',v.val);
                }
            }
        }
    },
    methods:{
        chgVal(v){
            var self = this;
            $(self.$el).find('.wysiwyg-input').summernote('code',v.val);
        }
    },
    mounted: function () {
        var self = this;
        $(self.$el).find('.wysiwyg-input').summernote({
            height: 300,
            callbacks: {
                onChange: function(contents, $editable) {
                    self.$emit('input',{val:contents,chg:false});
                }
            }
        });
        $(self.$el).find('.wysiwyg-input').summernote('code',self.value.val);

    }
}
</script>